<html>
<head>
<style><!--
canvas {left: 10px; position: relative;padding: 2px;}
-->
</style>
<script src="cchart.js"></script>
<script>
	function draw(){
		var bar1 = { "type": "bar", "3d": true, elements: [ { "values": [ 7, 3, 6, 9, 2, 8, 5, 4, 1 ] } ],
					 title: { "text": "Bar 1", style:{"text-align":"center", font: "bold 10px verdana"} },
					 x_legend: { text: "X Legend", style:{"text-align":"center", font: "10px verdana"} },
					 y_legend: { text: "Y Legend", style:{"text-align":"center", font: "10px verdana"} },
					 legend: {
						 position: "bottom",  style:{"text-align":"center", font: "bold 10px verdana"}, border: true,
						 "border-colour": "#FF0000"
					 },
					 x_axis: {'grid-visible': false}
				   };
		var bar2 = { "type":"bar",
					 "elements":[
					            {"colour":"#BF3B69","text":"Last year","font-size":12,"values":[9,8,7,6,5,4,3,2,1], text: "Series 1"},
					            {"colour":"#5E0722","text":"This year","font-size":12,"values":[10,9,8,7,6,5,3,2], text: "Series 2"}
					           ],
					 "title":{"text":"Bar 2"},
					 x_axis: {
						 labels: [{text: "One"}, "Two", {text: "Three", colour: "#BF3B69"}],
						 'grid-visible': false
					 },
					 y_axis: {'grid-visible': false},
					 legend: {border: false, type: "col"}
				   };
		var bar3 = { "type":"bar", "3d": true, 
				 "elements":[
				            {"colour":"#BF3B69","text":"Last year","font-size":12,"values":[9,8,7,6,5,4,3,2,1], text: "Series 1"},
				            {"colour":"#5E0722","text":"This year","font-size":12,"values":[10,9,8,7,6,5,3,2], text: "Series 2"}
				           ],
				 "title":{"text":"Bar 2"},
				 x_axis: {
					 labels: [{text: "One"}, "Two", {text: "Three", colour: "#BF3B69"}]
				 },
				 legend: {border: true, type: "row", position: "right"}
			   };
		var bar4 = { "type": "bar", "bar-style": "round",
				elements: [ { "values": [ 7, 3, 6, 9, 2, 8, 5, 4, 1 ] } ],
				 title: { "text": "Bar 1", style:{"text-align":"center", font: "bold 10px verdana"} },
				 x_legend: { text: "X Legend", style:{"text-align":"center", font: "10px verdana"} },
				 y_legend: { text: "Y Legend", style:{"text-align":"center", font: "10px verdana"} },
				 legend: {
					 position: "left",  style:{"text-align":"center", font: "bold 10px verdana"}, border: true,
					 "border-colour": "#FF0000"
				 }
			   };
		var bar5 = { "type": "bar", "bar-style": "round_glass",
				elements: [ { "values": [ 7, 3, 6, 9, 2, 8, 5, 4, 1 ] } ],
				 title: { "text": "Bar 1", style:{"text-align":"center", font: "bold 10px verdana"} },
				 x_legend: { text: "X Legend", style:{"text-align":"center", font: "10px verdana"} },
				 y_legend: { text: "Y Legend", style:{"text-align":"center", font: "10px verdana"} },
				 legend: {
					 position: "top",  style:{"text-align":"center", font: "bold 10px verdana"}, border: true,
					 "border-colour": "#FF0000"
				 }
			   };
		var bar6 = { "type":"bar", "bar-style": "cylinder",
				 "elements":[
				            {"text":"Last year","font-size":12,"values":[9,8,7,6,5,4,3,2,1], text: "Series 1"},
				            {"text":"This year","font-size":12,"values":[10,9,8,7,6,5,3,2], text: "Series 2"}
				           ],
				 "title":{"text":"Bar 2"},
				 x_axis: {
					 labels: [{text: "One"}, "Two", {text: "Three", colour: "#BF3B69"}],
					 'grid-visible': false
				 },
				 y_axis: {'grid-visible': false},
				 legend: {border: false, type: "col"}
			   };
		var bar7 = { "type": "bar", "bar-style": "cylinder", "3d": true, 
				elements: [ { "values": [ 7, 3, 6, 9, 2, 8, 5, 4, 1 ] } ],
				 title: { "text": "Bar 1", style:{"text-align":"center", font: "bold 10px verdana"} },
				 x_legend: { text: "X Legend", style:{"text-align":"center", font: "10px verdana"} },
				 y_legend: { text: "Y Legend", style:{"text-align":"center", font: "10px verdana"} },
				 legend: {
					 position: "top",  style:{"text-align":"center", font: "bold 10px verdana"}, border: true,
					 "border-colour": "#FF0000"
				 }
			   };
		new CanvasChart("first", bar1, 550, 200);
		new CanvasChart("second", bar2, 550, 200);
		new CanvasChart("three", bar3, 550, 200);
		new CanvasChart("four", bar4, 550, 200);
		new CanvasChart("five", bar5, 550, 200);
		new CanvasChart("six", bar6, 550, 200);
		new CanvasChart("seven", bar7, 550, 200);
	}
</script>
</head>
<body onload="draw();" ></body>
</html>